<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/floorDemo.css">
</head>

<body>
    <!-- 吸顶div -->
    <div class="searchTop">我是吸顶的搜索栏</div>


    <!-- 右侧侧边栏 -->
    <div class="sidebar">
        <ul>
            <li name="other" class="active">京东秒杀</li>
            <li name="other">今日特价</li>
            <li name="other">品牌闪购</li>
            <li name="other">发现好货</li>
            <li name="other">新品首发</li>
            <li name="other">频道广场</li>
            <li name="other">为你推荐</li>
            <li name="back">返回顶部</li>
        </ul>
    </div>

    <!-- 楼层导航内容 -->
    <div class="container">
        <!-- 页面顶部内容 -->
        <div class="header">页面的顶部导航栏</div>

        <!-- 页面顶部的搜索栏 -->
        <div class="search">我是头部的搜索栏</div>

        <!-- 页面的轮播图 -->
        <div class="banner">我是轮播图内容</div>

        <!-- 楼层导航内容 -->
        <div class="storey">
            <ul>
                <li>
                    <h3>京东秒杀区域</h3>
                    <div>京东秒杀区域内容</div>
                </li>

                <li>
                    <h3>今日特价区域</h3>
                    <div>今日特价区域内容</div>
                </li>

                <li>
                    <h3>品牌闪购区域</h3>
                    <div>品牌闪购区域内容</div>
                </li>

                <li>
                    <h3>发现好货区域</h3>
                    <div>发现好货区域内容</div>
                </li>

                <li>
                    <h3>新品首发区域</h3>
                    <div>新品首发区域内容</div>
                </li>

                <li>
                    <h3>频道广场区域</h3>
                    <div>频道广场区域内容</div>
                </li>

                <li>
                    <h3>为你推荐区域</h3>
                    <div>为你推荐区域内容</div>
                </li>
            </ul>
        </div>

        <!-- 页面底部内容 -->
        <div class="footer">我是页面底部内容</div>
    </div>


    <script src="../js/jquery.min.js"></script>

    <script>
        // 页面滚动监听事件
        $(window).scroll(function () {
             // 当 页面 上卷至 指定高度时 让 吸顶div 和 侧边栏div 显示
            if ($(window).scrollTop() > 500) {
                // 以运动的方式显示
                $('.searchTop').stop().slideDown(1000);
                $('.sidebar').stop().fadeIn(1000);
            } else {
                 // 以运动的方式隐藏
                $('.searchTop').stop().slideUp(1000);
                $('.sidebar').stop().fadeOut(1000);
            }
            // 循环遍历 给 所有的楼层li 添加 判断
            $('.storey ul li').each(function (key, item) {
                // 如果 上卷高度 + 预留高度 > 楼层li距离页面顶部间距
                if( $(window).scrollTop() + 500 > $(item).offset().top) {
                    // 给 楼层li 对应的 侧边栏li 添加 css 
                    // 其他 侧边栏 li 清除 css
                    $('.sidebar li').removeClass('active').eq(key).addClass('active');
                }
            })
        })
        // 侧边栏的点击事件
        $('.sidebar ul li').click(function(e){
            if($(e.target).attr('name') === 'other'){
                // 点击标签的name属性是other 点击都是 侧边栏li标签
                // 页面上卷高度 是 点击的侧边栏li 对应的 楼层li 距离页面顶部的间距
                // 按照 点击的侧边栏li的索引下标 查询 楼层导航li 获取 顶部间距
                $('html').animate({scrollTop : $('.storey ul li').eq($(e.target).index()).offset().top - 300},500);

            }else if($(e.target).attr('name') === 'back'){
                // 点击标签的name属性是back 点击都是 返回顶部标签
                // 页面上卷高度 是 0
                // 通过 运动完成 
                $('html').animate({scrollTop : 0},1000);
            }
        })

    </script>
</body>

</html>